<template>
	<view>
		<!-- 头部导航 -->
		<u-navbar :is-back="false" title="消息通知" :background="background" :title-color="black" title-color="#fff"
			:title-size="40"></u-navbar>
		<view class="message" @click="messDetail(item)" v-for="item in item">
			<view class="time">
				{{item.created_at}}
			</view>
			<view class="notice">
				<span style="font-size: 30rpx;display: flex;align-items: center;">
					[<text style="padding: 0 10rpx;color: red;">{{item.send_user_id}}</text>]
					<text class="textTitle">{{item.title}}</text>
				</span>
				<image src="../../static/myBackstage/right.png" style="width: 40rpx;" mode="widthFix">
			</view>
		</view>
		<view class="empty">
			<u-empty text="消息列表为空" mode="message" v-show="show"></u-empty>
		</view>
		<!-- <view
			style="line-height: 60rpx;text-align: center;color: #c8c9cc;padding-bottom: -40rpx;margin-top: -40rpx;z-index: 999;">
			{{loadMorePrompt}}
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//设置导航栏背景颜色
				background: { // 渐变色
					backgroundImage: 'linear-gradient(45deg, #A471FC, #77B4F7)'
				},
				item: [],
				show: true,
				allPage: 0, //总页数
				page: 1, //当前页
				loadMorePrompt: '上拉加载更多...',
			}
		},
		onLoad() {
			this.getfileList() // 列表数据
		},
		methods: {
			//跳转
			messDetail(item) {
				let item1 = JSON.stringify(item)
				uni.navigateTo({
					url: `messDetail?item=${item1}`
				})
			},
			getfileList() { // 列表数据
				this.loadMorePrompt = '加载中...'
				uni.showLoading({
					title: '加载中...'
				})
				this.$http(this.$api.message, {
					page: this.page
				}).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: '加载成功',
						icon: 'none',
					})
					// 总数/一页展示的个数
					this.allPage = Math.ceil(res.data.count / res.data.list.length)
					this.item = [...this.item, ...res.data.list]
					this.loadMorePrompt = '上拉加载更多...'
					if (this.item != '') {
						this.show = false
					} else {
						this.show = true
					}
					if (res.data.list.length <= res.data.count) {
						this.loadMorePrompt = '没有更多的消息了 ~~~'
					}
					uni.stopPullDownRefresh()
				})
			},
		},
		onReachBottom() { //上拉加载更多
			if (this.page == this.allPage) return
			else this.page++;
			this.getfileList()
		},
		onPullDownRefresh() { //下拉刷新
			this.page = 1
			this.item = []
			this.getfileList()
		}
	}
</script>

<style>
	.textTitle {
		display: inline-block;
		width: 450rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.message {
		border: 0px red solid;
		width: 95%;
		margin: 0 auto;
		margin-top: 10px;
		border-radius: 10px;
		box-shadow: 0px 0px 2px #c8c9cc;
		padding: 10px;
		margin-bottom: 20rpx;
	}

	.time {
		font-size: 13px;
		color: #AFAFAF;
		text-align: center;
	}

	.notice {
		border-bottom: 1px #F4F4F4 solid;
		height: 50px;
		line-height: 50px;
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.notice span {
		font-size: 16px;
		margin-right: 5px;
	}

	.detail {
		float: right;
		margin-top: 5px;
	}

	.xiaoxi {
		border-bottom: 1px #F4F4F4 solid;
		height: 45px;
		line-height: 45px;
		font-size: 14px
	}

	.xiaoxi li {
		display: flex;
		justify-content: space-between;
	}

	.empty {
		margin-top: 200rpx;
	}
</style>
